<template>
	<view class="home">
		<view class="navBar">
			<view class="MyInfo" @click="gotoMy()">
				<uni-icons type="person-filled" size="30" color="#f1f1f1"></uni-icons>
				<view for="" style=" margin-left: 10rpx;  height: 50rpx; line-height: 50rpx;">个人中心</view>
			</view>
		</view>
		<homeTopVue ></homeTopVue>
		<homeListVue></homeListVue>
		
		<view class="" @click="shopping()">
			<shoppingCartVue :page="page" ></shoppingCartVue>
		</view>
		

		
		<u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
				<view style="height: 800rpx;">
					<view class="shopingTop">
						<text style="font-size: 40rpx; font-weight: 600;">购物车</text>
						<view class="" style="font-size: 26rpx; color: #666;" @click="remove()">
							<uni-icons type="trash" size="26"></uni-icons>
							<text>清空</text>
						</view>
					</view>
					<u-line length="95%" margin="20rpx 20rpx"></u-line>
					
					<u-empty
							mode="car"
							icon="http://cdn.uviewui.com/uview/empty/car.png"
							width="320"
							height="320"
							textSize="28"
							:show=" list.length == 0 ? true : false "
					>
					</u-empty>
					
					<scroll-view class="shoppingList" :scroll-y="true" style="height: 500rpx">
						<view v-for="(item,index) in list" :key="index" class="product">
							<view class="" style="display: flex;">
								<img :src="item.image" alt="" style="width: 150rpx; height: 150rpx; border-radius: 10rpx;" mode="aspectFill" />
								<view class="productInfo" >
									<text style="font-weight: 600; font-size: 34rpx;margin-top: 15rpx;">{{item.name}}</text>
									<text style="margin-bottom: 15rpx; color: red;">￥{{item.amount}}</text>
								</view>
							</view>
							<view class="">
								<uni-number-box :value="item.number" :max="item.productNum" @change="changeValue($event,item)" />
							</view>
							
						</view>
					</scroll-view>
				
				<uni-popup ref="alertDialog" type="dialog">
					<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" title="提示" :content="messageText" @confirm="dialogConfirm"
						@close="dialogClose"></uni-popup-dialog>
				</uni-popup>
				
				</view>

		</u-popup>
		
		

		
		<loginVue></loginVue>
	</view>
</template>
	
<script>
import homeTopVue from "../../components/homeTop.vue"
import homeListVue from "../../components/homeList.vue"
import shoppingCartVue from "../../components/shoppingCart.vue"
import loginVue from "../../components/login.vue"
import {shoppingCartList,delShoppingCart,addShoppingCart,sub} from '@/api/shoppingCart.js'
export default {
	components:{
		homeTopVue,
		homeListVue,
		shoppingCartVue,
		loginVue
	},
	data(){
		return{
			page:'submitOrder',
			msgType: 'info',
			messageText:'是否清空购物车？',
			show: false,
			numberValue: 0,
			list:[
				{
					name:'蛋糕',
					amount:55,
					num:2,
					image:'https://c-ssl.dtstatic.com/uploads/blog/202207/25/20220725212736_dc856.thumb.1000_0.png'
				},
				{
					name:'蛋糕',
					amount:55,
					num:2,
					image:'https://c-ssl.dtstatic.com/uploads/blog/202207/25/20220725212736_dc856.thumb.1000_0.png'
				},
				{
					name:'蛋糕',
					amount:55,
					num:2,
					image:'https://c-ssl.dtstatic.com/uploads/blog/202207/25/20220725212736_dc856.thumb.1000_0.png'
				},
				{
					name:'蛋糕',
					amount:55,
					num:2,
					image:'https://c-ssl.dtstatic.com/uploads/blog/202207/25/20220725212736_dc856.thumb.1000_0.png'
				},
				{
					name:'蛋糕',
					amount:55,
					num:2,
					image:'https://c-ssl.dtstatic.com/uploads/blog/202207/25/20220725212736_dc856.thumb.1000_0.png'
				},
				{
					name:'蛋糕',
					amount:55,
					num:2,
					image:'https://c-ssl.dtstatic.com/uploads/blog/202207/25/20220725212736_dc856.thumb.1000_0.png'
				},
				{
					name:'蛋糕',
					amount:55,
					num:2,
					image:'https://c-ssl.dtstatic.com/uploads/blog/202207/25/20220725212736_dc856.thumb.1000_0.png'
				},
			]
		}
	},
	onLoad(){
		// uni.getSystemInfo({
		// 	success: function(res) {
		// 		console.log('DPR：' + res.pixelRatio)
		// 		console.log('宽度：' + res.screenWidth)
		// 		console.log('高度：' + res.screenHeight)
		// 		console.log(res)
		// 	}
		// })

	},
	onReady(){
		this.init()
		
	},
	watch:{
		'$store.state.shoppingCartChange':function(newVal){
			this.init()
		},
		'$store.state.loginShow':function(newVal){
			this.init()
		}
	},
	methods:{
		init(){
			this.list = []
			shoppingCartList(this.$store.state.storeId).then(res=>{
				this.list = res.data
			}).catch(err=>{
				uni.showToast({
					title:err
				})
			})
		},
		dialogClose() {
			console.log('点击关闭')
			uni.showToast({
				title:'已取消清空购物车',
				icon:'none'
			})
		},
		dialogConfirm() {
			// this.$refs.message.open()
			if(this.list.length == 0){
				uni.showToast({
					title:'购物车为空',
					icon:'none'
				})
			}else{
				delShoppingCart(this.$store.state.storeId).then(res=>{
					this.$store.state.shoppingCartChange = !this.$store.state.shoppingCartChange
					uni.showToast({
						title:'已清空购物车',
					})
				}).catch(err=>{
					uni.showToast({
						title:err,
					})
				})
			}
		},
		changeValue(e,item) {
			console.log(item)
			console.log(e)
			console.log(item.number)
			const config = {
				inventoryId: item.id,
				productId: item.productId,
				storeId: this.$store.state.storeId
			}
			//todo 加到库存后无法添加
			if(e>item.number){ //加
				addShoppingCart(config).then(res=>{
					// console.log('成功',res)
					uni.showToast({
						title:'添加成功'
					})
					this.$store.state.shoppingCartChange = !this.$store.state.shoppingCartChange
				}).catch(err=>{
					console.log('失败')
					uni.showToast({
						title:err
					})
				})
			}else if(e<item.number){ //减
				sub(config).then(res=>{
					uni.showToast({
						title:'减少成功'
					})
					this.$store.state.shoppingCartChange = !this.$store.state.shoppingCartChange
				if(e == 0){
					this.init()
				}
				}).catch(err=>{
					uni.showToast({
						title:err
					})
				})
			}
		},
		gotoMy(){
			console.log("gotoMY")
			uni.navigateTo({
				url:'/pages/my/my'
			});
		},
		shopping(){
			this.show = true
			// console.log(this.show)
			
		},
		open() {
			console.log('open');
		  },
		close() {
			this.show = false
			// console.log('close');
		},
		remove(){
			this.$refs.alertDialog.open()

		}
	}
}
</script>

<style scoped>
.navBar{
	position: fixed;
	display: flex;
	z-index: 1;
	top: 0;
	left: 0;
	height: 160rpx;
	width: 100vw;
	box-sizing: border-box;
	height: 304rpx;
	opacity: 1;
	background: linear-gradient(184deg, rgba(0, 0, 0, 0.35) 25%, rgba(51, 51, 51, 0) 96%);
	background-image: url('../../static/top2.jpg');
	background-image: url('https://web-kotori.oss-cn-beijing.aliyuncs.com/a45c5091-91f2-4be9-b9cc-849bf5c04c3c.jpg');
	background-image: url("https://web-kotori.oss-cn-beijing.aliyuncs.com/31592d3c-d040-41d5-8589-633b56b32e8f.jpg");
}
.MyInfo{
	/* line-height: 30rpx; */
	/* margin-top: -30px; */
	margin-top: 55rpx;
	margin-left: 15rpx;
	height: 50rpx;
	line-height: 50rpx;
	display: flex;
	color: aliceblue;
}

.homeTopVue{
	/* margin-top: 50rpx; */
}

.shopingTop{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 30rpx;
}

.product{
	height: 150rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 25rpx;
}

.shoppingList{

}

.productInfo{
	display: flex; 
	flex-direction: column; 
	justify-content: space-between;
	margin-left: 25rpx;
	
}
</style>